<template>
  <div>
    <div>
      <div>
        <!-- header  点击 -->
        <headers @tab1="tabs1" @tab2="tabs2" @tab3="tabs3" :userList="userList"></headers>
      </div>
      <div class="bg1 userBox">
        <div class="wrap user_set bgw">
          <div v-if="navTab <2" class="nav">
            <div @click="navTab = 0" :class="{navActive: navTab == 0}">
              个人资料
              <i></i>
            </div>
            <div @click=" navTab= 1" :class="{navActive: navTab == 1}">
              修改密码
              <i></i>
            </div>
          </div>
          <div v-if="navTab == 2" class="nav">
            <div>修改手机号</div>
          </div>
          <!-- 修改 个人信息  -->
          <div v-if="navTab == 0" class="content">
            <div class="user_num">
              <span>用户编号:</span>
              {{userList.member_card}}
            </div>
            <div class="user_name">
              <span>昵称:</span>
              <input maxlength="12" type="text" v-model="name" placeholder="用户昵称" />
            </div>
            <div class="user_img">
              <span>头像</span>
              <!-- <p>修改</p>
              <img src="@/assets/image/Furtherconsultation_Defaulthead@2x.png" alt />-->
              <div>
                <el-upload
                  :action="imageUrl"
                  list-type="picture-card"
                  :on-success="UserImgSuccess"
                  :before-upload="beforeAvatarUpload"
                  :on-remove="UserImgtRemove"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </div>
            </div>
            <div class="user_birthday">
              <span>出生日期</span>
              <el-date-picker
                v-model="birthday"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </div>
            <div class="user_sex">
              <span>性别</span>
              <el-radio v-model="sex" label="0">男性</el-radio>
              <el-radio v-model="sex" label="1">女性</el-radio>
            </div>
            <button @click="UserDataChecking()">保存</button>
          </div>

          <!-- 修改 密码 -->
          <div v-show="navTab == 1" class="content user_set_phone">
            <!-- <div>
          <span>手机号</span>
          <input v-model="phone" type="text " maxlength="11" />
            </div>-->
            <!-- <div class="checking">
          <span>验证码</span>
          <input v-model="phoneCode" type="text " maxlength="6" />
          <p @click="phoneChecking" v-if="time == 60 ">获取验证</p>
           <p  v-if="time != 60 "> {{time}} </p>
            </div>-->
            <div>
              <span>输入新密码</span>
              <input v-model="password1" maxlength="12" type="password " />
            </div>
            <div>
              <span>再次输入新密码</span>
              <input v-model="password2" maxlength="12" type="password " />
            </div>
            <button @click="UserPasswordChecking()">保存</button>
          </div>
          <!-- 修改 手机号 -->
          <div v-show="navTab == 2" class="content user_set_phone">
            <div>
              <span>新手机号</span>
              <input v-model="phone" type="text " maxlength="11" />
            </div>
            <div class="checking">
              <span>验证码</span>
              <input v-model="phoneCode" type="text " maxlength="6" />
              <p @click="phoneChecking" v-if="time == 60 ">获取验证</p>
              <p v-if="time != 60 ">{{time}}</p>
            </div>
            <div>
              <span>登录密码</span>
              <input v-model="password3" maxlength="12" type="password " />
            </div>
            <button @click="UserPhoneChecking()">绑定</button>
          </div>
        </div>
      </div>
      <div>
        <publicBottom></publicBottom>
      </div>
    </div>
  </div>
</template>
<script>
import headers from "./header"; // 头部 TOP 和header
import publicBottom from "@/components/public/public_bottom"; //底部

import { usergetinfo } from "@/request/user";
import { sendSms } from "@/request/public"; //手机验证
import { updateinfo } from "@/request/user"; // 修改个人信息
import { modifypassword } from "@/request/user"; //修改密码
import { modifyMobile } from "@/request/user"; // 修改 手机号

export default {
  components: {
    headers,
    publicBottom
  },
  data() {
    return {
      userList: [], // 个人信息
      navTab: 0,
      birthday: "", // 出生日期
      sex:-1, //性别
      checking1: "", //验证
      time: 60, //倒计时
      phone: "", //手机号
      phoneCode: "", //手机号验证码
      password1: "", //新密码
      password2: "", // 再次 输入 新密码
      password3: "", //登录密码
      name: "", // 个人信息  名字
      avatar: "" // 头像
    };
  },
  created() {
    let datas = localStorage.getItem("lzyyToken");
    let Athis = this;
    if (datas != null) {
      this.$tokens = datas;
    } else {
      this.$message.error("登录错误，请重新登录");
      setTimeout(function() {
        Athis.$router.replace({ path: "/land" });
      }, 1000);
    }
    this.init();
    this.navTab = this.$route.query.state;
  },
  methods: {
    tabs1() {
      this.navTab = 0;
    },
    tabs2() {
      this.navTab = 1;
    },
    tabs3() {
      this.navTab = 2;
    },
    init() {
      //   个人信息
      usergetinfo({
        token: this.$tokens
      }).then(res => {
        this.userList = res.data;
      });
    },
    UserPhoneChecking() {
      if (this.phone == "") {
        this.$message.error("手机号不能为空");
        return false;
      } else if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$message.error("手机号格式不正确");
        return false;
      } else if (this.phoneCode == "") {
        this.$message.error("验证码不能为空");
        return false;
      } else {
        this.UserPhoneSend();
      }
    },
    UserPhoneSend() {
      modifyMobile({
        token: this.$tokens,
        new_mobile: this.phone,
        code: this.phoneCode,
        user_pass: this.password3
      }).then(res => {
        console.log(res);
        
        if (res.code == 1) {
          this.$message({
            message: "修改成功",
            type: "success"
          });
          this.$router.replace({ path: "/user/index" });
        }
      });
    },
    UserPasswordChecking() {
      if (this.password1 == "") {
        this.$message.error("密码 不能 为空");
        return;
      } else if (this.password1.length < 5) {
        this.$message.error("密码 不能 低于 6位");
        return;
      } else if (this.password1 != this.password2) {
        this.$message.error("密码 不一致");
        return;
      } else {
        this.UserPasswordSend();
      }
    },
    UserPasswordSend() {
      modifypassword({
        token: this.$tokens,
        user_pass: this.password2
      }).then(res => {
        if (res.code == 1) {
          this.$message({
            message: "修改成功",
            type: "success"
          });
          this.$router.replace({ path: "/user/index" });
        }
      });
    },
    UserDataChecking() {
      if (this.name == "") {
        this.$message.error("姓名 不能 为空");
        return;
      } else if (this.avatar == "") {
        this.$message.error("头像 不能 为空");
      } else if (this.birthday == "") {
        this.$message.error("出生日期 不能 为空");
      } else if (this.sex == "") {
        this.$message.error("性别 不能 为空");
      } else {
        this.UserDataSend();
      }
    },
    UserDataSend() {
      updateinfo({
        token: this.$tokens,
        user_nickname: this.name,
        avatar: this.avatar,
        birthday: this.birthday,
        sex: this.sex
      }).then(res => {
        if (res.code == 1) {
          this.$message({
            message: "修改成功",
            type: "success"
          });
          this.$router.replace({ path: "/user/index" });
        }
      });
    },
    //  个人 头像
    UserImgSuccess(response, file) {
      let imgurl = response.data.file.url;
      file.url = imgurl;
      this.avatar = response.data.file.url;
    },
    // 个人头像 删除
    UserImgtRemove() {
      this.avatar = "";
    },
    // 手机号验证
    phoneChecking() {
      if (this.phone == "") {
        this.$message.error("手机号不能为空");
        return false;
      } else if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$message.error("手机号格式不正确");
        return false;
      } else if (this.time == 60) {
        this.time = 59;
        this.times();
        sendSms({
          account: this.phone
        }).then(res => {
          if (res.code == 1) {
            this.checking1 = 2;
            this.$message({
              message: "发送成功",
              type: "success"
            });
          } else {
            this.$message.error("手机号格式不正确");
          }
        });
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    times() {
      var Athis = this;
      var setTime = setTimeout(function() {
        if (Athis.time == 0) {
          clearTimeout(setTime);
          Athis.time = 60;
        } else {
          Athis.time--;
          Athis.times();
        }
      }, 1000);
    }
  }
};
</script>

<style lang="less" scoped>
.indexUse_content {
  background: #f5f5f5;
  padding-top: 24px;
  padding-bottom: 24px;
}

.user_set {
  .checking {
    input {
      width: 237px !important;
    }
    p {
      cursor: Default;
      margin-left: 16px;
      display: inline-block;
      width: 160px;
      height: 46px;
      color: #808080;
      line-height: 46px;
      font-size: 16px;
      text-align: center;
      background: rgba(230, 230, 230, 1);
    }
  }
}
// 修改密码
.user_set_phone {
  span {
    width: 130px !important;
  }
  input {
    width: 380px;
    height: 46px;
    text-indent: 10px;
    border: 1px solid #e6e6e6 !important;
  }
}

// 个人资料
.user_set {
  padding-bottom: 40px;
  button {
    width: 130px;
    height: 46px;
    font-size: 18px;
  }
}
.user_set .user_sex {
  .el-radio__inner {
    width: 16px;
    height: 16px;
  }
}
.user_set .user_birthday {
  .el-input__inner {
    width: 220px;
    height: 46px;
    line-height: 46px;
    border: 1px solid #e6e6e6 !important;
    font-size: 16px;
  }
  .el-input__icon {
    line-height: 48px;
  }
}
.user_set .user_img {
  height: 150px !important;
  span {
    position: absolute;
    left: 0;
    top: 0;
  }
  > div {
    // // margin-left: 90px;
    // padding-left: 90px;
    overflow: hidden;
    height: 150px;
    position: absolute;
    left: 90px;
    width: 150px;
  }
  p {
    position: absolute;
    left: 90px;
    width: 186px;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    color: white;
  }
}
.user_set .user_name {
  input {
    width: 380px;
    height: 46px;
    text-indent: 10px;
    border: 1px solid #e6e6e6 !important;
  }
}
.user_set .content {
  padding-top: 46px;
  padding-left: 72px;
  color: #4d4d4d;
  font-size: 16px;
  > div {
    height: 46px;
    position: relative;
    margin-bottom: 36px;
  }
  > div > span {
    display: inline-block;
    width: 90px;
  }
}
.user_set .user_num {
  line-height: 46px;
}
.user_set .nav {
  width: 100%;
  height: 68px;
  border-bottom: 1px solid #e6e6e6;
  font-size: 18px;
  padding-left: 20px;
  display: flex;
  > div {
    line-height: 68px;
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
    cursor: Pointer;
  }
}
.user_set .navActive {
  color: #4eeec8;

  i {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    border-bottom: 2px solid #4eeec8;
  }
}
.user_set {
  border: 1px solid #e6e6e6;
}
</style>